<template>
  <div class="wrapper">
    <div class="other-dw">
      <p class="t1"><span class="iconfont icon-heart"></span>定位失败</p>
      <p class="t2"><span class="iconfont icon-diqiu"></span>必游榜单</p>
    </div>
    <div class="bg1"></div>
    <div class="other-hot">
      <div class="top">
        <p class="t1"><span class="iconfont icon-xinxing"></span>本周热门榜单</p>
        <span class="t2">全部榜单></span>
      </div>
      <ul class="hot-list">
        <li class="imgList oneList" v-for="t in otherList" :key="t.id">
          <img :src="t.imgUrl"/>
          <p class="p1">{{t.address}}</p>
          <p class="p2"><span>￥{{t.price}}</span>起</p>
        </li>
      </ul>
    </div>
    <!--猜你喜欢部分-->
    <ul class="yLike">
      <div class="yLike-top"><span class="iconfont icon-xinxing"></span>猜你喜欢</div>
      <router-link
        tag="li"
        class="yLike-box"
        v-for="t in yLike"
        :key="t.id"
        :to="/detail/+t.id"
      >
        <img class="yLike-img" :src="t.imgUrl" alt="">
        <div class="yLike-box2">
          <p class="t1">{{t.desc}}</p>
          <p class="t2"><span>*****</span> <span>{{t.num}}条评论</span></p>
          <div class="t3">
            <p><i>￥</i><b>{{t.price}}</b>起</p>
            <span>{{t.address}}</span>
          </div>
          <p class="t4">{{t.text}}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HomeOther',
    props: {
      otherList: Array,
      yLike: Array
    },
    data () {
      return {
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .other-dw{
    margin-top :.05rem;
    border-top:.01rem solid gainsboro;
    height:.46rem;
    display flex
    font-size .14rem
    .t1{
      width: 50%
      border-right:.01rem solid gainsboro;
      box-sizing :border-box;
      text-align center
      line-height .46rem
    }
    .t2{
      width:50%;
      text-align center
      line-height .46rem
    }
  }
  .bg1{
    width: 100%
    height:.1rem;
    background-color :#f5f5f5;
  }
  .other-hot{
    .top{
      margin-top:.1rem;
      .t1{font-size :.16rem;
      }
      .t2{
        margin-right :.05rem;
      }
      margin-left :.1rem;
      display flex
      justify-content space-between
    }
  }
  //  热门图片列表部分
  .hot-list{
    overflow-x:scroll;
    white-space nowrap
    .top{
      padding-top :.1rem;
    }
    .oneList{
      margin-left:.1rem !important;
    }
    .imgList{
      width:1rem;
      margin-top :.15rem;
      margin-left :.06rem;
      text-align center
      display inline-block
      img{
        width:1rem;
      }
      .p1{
        margin:.05rem 0;
      }
      .p2{
        margin-bottom .05rem;
        span{
          color:#ff8e17;
        }
      }
    }
  }
  //  猜你喜欢部分
  .yLike{
    .yLike-top{
      span{
        color:red;
      }
      margin-left :.1rem;
      line-height :.35rem;
      font-size :.16rem;
    }
    .yLike-box{
      border-bottom:.01rem solid gainsboro;
      overflow:hidden;
      margin-top :.1rem;
      margin-left:.1rem;
      img{
        width:1rem;
        float :left;
      }
      .yLike-box2{
        width:65%;
        float:left;
        margin-left:.1rem;
        .t1{
          font-size :.16rem;
          line-height :.4rem;
        }
        .t3{
          display :flex;
          justify-content space-between
          line-height :.4rem;
          i{
            color:orange;
          }
          b{
            color:orange;
            font-size :.2rem;
          }
          span{
            text-align :right;
          }
        }
        .t4{
          margin:.2rem 0;
          color:red;
        }
      }
    }
  }
</style>
